@extends('admin.layouts.app')

@section('title', '编辑系统设置')

@section('content')
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">编辑系统设置</h1>
            <p class="mb-0 text-muted">修改系统配置参数</p>
        </div>
        <div>
            <a href="{{ route('admin.system-settings.show', $setting) }}" class="btn btn-outline-info btn-sm me-2">
                <i class="fas fa-eye"></i> 查看详情
            </a>
            <a href="{{ route('admin.system-settings.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6 class="alert-heading">表单验证失败</h6>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">设置信息</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.system-settings.update', $setting) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="key" class="form-label">设置键名 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('key') is-invalid @enderror" 
                                           id="key" name="key" value="{{ old('key', $setting->key) }}" 
                                           placeholder="例如：site_name" required>
                                    <div class="form-text">唯一标识符，只能包含字母、数字和下划线</div>
                                    @error('key')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="label" class="form-label">显示名称 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('label') is-invalid @enderror" 
                                           id="label" name="label" value="{{ old('label', $setting->label) }}" 
                                           placeholder="例如：网站名称" required>
                                    <div class="form-text">用户界面显示的名称</div>
                                    @error('label')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="group" class="form-label">设置分组 <span class="text-danger">*</span></label>
                                    <select class="form-select @error('group') is-invalid @enderror" 
                                            id="group" name="group" required>
                                        <option value="">请选择分组</option>
                                        @foreach($groups as $key => $name)
                                            <option value="{{ $key }}" {{ old('group', $setting->group) === $key ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('group')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="type" class="form-label">数据类型 <span class="text-danger">*</span></label>
                                    <select class="form-select @error('type') is-invalid @enderror" 
                                            id="type" name="type" required>
                                        <option value="">请选择类型</option>
                                        @foreach($types as $key => $name)
                                            <option value="{{ $key }}" {{ old('type', $setting->type) === $key ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">描述说明</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3" 
                                      placeholder="请输入设置项的详细描述">{{ old('description', $setting->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3" id="valueField">
                            <label for="value" class="form-label">设置值</label>
                            @if($setting->type === 'boolean')
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="value" name="value" 
                                           value="1" {{ old('value', $setting->value) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="value">
                                        {{ old('value', $setting->value) ? '启用' : '禁用' }}
                                    </label>
                                </div>
                            @elseif($setting->type === 'text')
                                <textarea class="form-control @error('value') is-invalid @enderror" 
                                          id="value" name="value" rows="4" 
                                          placeholder="请输入设置值">{{ old('value', $setting->value) }}</textarea>
                            @elseif($setting->options && is_array($setting->options))
                                <select class="form-select @error('value') is-invalid @enderror" 
                                        id="value" name="value">
                                    @if(!$setting->is_required)
                                        <option value="">请选择</option>
                                    @endif
                                    @foreach($setting->options as $optionKey => $optionValue)
                                        <option value="{{ $optionKey }}" {{ old('value', $setting->value) == $optionKey ? 'selected' : '' }}>
                                            {{ $optionValue }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <input type="{{ $setting->type === 'integer' ? 'number' : 'text' }}" 
                                       class="form-control @error('value') is-invalid @enderror" 
                                       id="value" name="value" value="{{ old('value', $setting->value) }}" 
                                       placeholder="请输入设置值">
                            @endif
                            @error('value')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3" id="optionsField" style="display: {{ $setting->options ? 'block' : 'none' }};">
                            <label for="options" class="form-label">选项配置</label>
                            <textarea class="form-control @error('options') is-invalid @enderror" 
                                      id="options" name="options" rows="4" 
                                      placeholder='请输入JSON格式的选项，例如：{"option1":"选项1","option2":"选项2"}'>{{ old('options', $setting->options ? json_encode($setting->options, JSON_UNESCAPED_UNICODE) : '') }}</textarea>
                            <div class="form-text">JSON格式的键值对，用于下拉选择等类型</div>
                            @error('options')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sort_order" class="form-label">排序</label>
                                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                           id="sort_order" name="sort_order" value="{{ old('sort_order', $setting->sort_order) }}" 
                                           min="0" placeholder="排序权重">
                                    <div class="form-text">数字越小排序越靠前</div>
                                    @error('sort_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="is_required" 
                                           name="is_required" value="1" {{ old('is_required', $setting->is_required) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_required">
                                        必填项
                                    </label>
                                    <div class="form-text">标记为必填的设置项不能为空</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="is_public" 
                                           name="is_public" value="1" {{ old('is_public', $setting->is_public) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_public">
                                        公开设置
                                    </label>
                                    <div class="form-text">公开设置可以在前端访问</div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <a href="{{ route('admin.system-settings.index') }}" class="btn btn-secondary me-2">
                                <i class="fas fa-times"></i> 取消
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 更新设置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">设置详情</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <td class="text-muted">ID</td>
                            <td>{{ $setting->id }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">创建时间</td>
                            <td>{{ $setting->created_at->format('Y-m-d H:i:s') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">更新时间</td>
                            <td>{{ $setting->updated_at->format('Y-m-d H:i:s') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">当前值</td>
                            <td>
                                @if($setting->type === 'boolean')
                                    <span class="badge bg-{{ $setting->value ? 'success' : 'secondary' }}">
                                        {{ $setting->value ? '启用' : '禁用' }}
                                    </span>
                                @elseif(is_array($setting->value))
                                    <code>{{ json_encode($setting->value, JSON_UNESCAPED_UNICODE) }}</code>
                                @else
                                    <code>{{ $setting->value }}</code>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">操作提示</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-info small mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>注意事项：</strong>
                        <ul class="mb-0 mt-2">
                            <li>修改系统设置可能影响网站功能</li>
                            <li>建议在测试环境先验证修改效果</li>
                            <li>重要设置修改后建议清除缓存</li>
                            <li>布尔类型设置使用开关控制</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// 根据类型切换输入字段
document.getElementById('type').addEventListener('change', function() {
    const type = this.value;
    const valueField = document.getElementById('valueField');
    const optionsField = document.getElementById('optionsField');
    
    // 根据类型显示/隐藏选项字段
    if (type === 'select') {
        optionsField.style.display = 'block';
    } else {
        optionsField.style.display = 'none';
    }
});

// 键名自动转换
document.getElementById('key').addEventListener('input', function() {
    this.value = this.value.toLowerCase().replace(/[^a-z0-9_]/g, '_');
});

// 布尔值开关标签更新
const booleanSwitch = document.querySelector('input[type="checkbox"]#value');
if (booleanSwitch) {
    booleanSwitch.addEventListener('change', function() {
        const label = this.nextElementSibling;
        label.textContent = this.checked ? '启用' : '禁用';
    });
}

// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
    const type = document.getElementById('type').value;
    const options = document.getElementById('options').value;
    
    if (type === 'select' && !options.trim()) {
        e.preventDefault();
        alert('选择类型需要配置选项！');
        return;
    }
    
    if (type === 'json' || (type === 'select' && options.trim())) {
        try {
            JSON.parse(options || '{}');
        } catch (error) {
            e.preventDefault();
            alert('选项配置必须是有效的JSON格式！');
            return;
        }
    }
});
</script>
@endpush